Efek Animasi Sederhana pada Menu dengan jQuery

Efek Animasi Sederhana pada Menu

dengan JQuery
oleh Achmad Solichin *

S alah satu keunggulan jQuery adalah “keluwesan” dan kemudahannya dalam

berkolaborasi dengan CSS (Cascading Style Sheet) sehingga penampilan halaman
web menjadi semakin indah. Selain itu jQuery juga dapat menjembatani
“kesenjangan” beberapa browser dalam mengimplementasikan
CSS.

Di sisi lain, animasi, merupakan hal yang masih diminati dalam

dunia web karena menjadi salah satu hal yang akan menarik
perhatian pengunjung. Dalam tutorial ini, kita akan mencoba
menambahkan efek animasi sederhana pada menu yang dibuat
dengan CSS. Kita akan memanfaatkan fungsi animate() yang
sudah disediakan oleh jQuery.

Mari kita coba langkah per langkahnya.

Langkah 1
Buat tampilan menu dengan list (<ul>). Tambahkan class dengan nama “menu” pada tag
<ul>.

1 <ul class="menu">
2 <li><a href="http://achmatim.net">Home</a></li>
3 <li><a href="http://achmatim.net/materi-kuliah">Materi Kuliah
</a></li>
4 <li><a href="http://achmatim.net/about">About Me</a></li>
5 <li><a href="http://achmatim.net/downloads">Downloads</a></li>
6 <li><a href="http://achmatim.net/friends">Friends</a></li>
7 </ul>

Langkah 2
Atur tampilan menu dengan CSS. Berikut ini contohnya:

1 ul.menu{
2 margin:0 0 1em;
3 width:125px;
4 list-style:none
5 }
6 ul.menu li {
7 margin:0;
8 background:#000;
9 }
10 ul.menu li a {
11 position:relative;

Halaman | 1
 Efek Animasi Sederhana pada Menu dengan jQuery

12 display:block;
13 padding:6px 0;
14 width:125px;
15 background:#000;
16 color:#fff;
17 text-align:center;
18 text-decoration:none;
19 }
20 ul.menu li a:hover {
21 border:0;
22 background:#000;
23 color:#ff0;
24 }

Pengaturan yang dilakukan dengan CSS diatas dapat dijelaskan secara singkat sbb:
 Atur tag <ul> dengan class menu yaitu margin 0 dari atas dan kiri serta 1em dari
bawah, lebarnya adalah 125px (default 100%) dan hilangkan bullet (titik) untuk
setiap list didalamnya.
 Untuk setiap <li> di dalam <ul> atur margin di semua sisi menjadi 0 dan atur
background list menjadi hitam (#000)
 Untuk link (<a>) yang ada di dalam list (<li>) atur display menjadi block, warna
tulisan menjadi putih (#fff) dan hilangkan garis bawah di link.
 Untuk link (<a>) yang di-hover, ubah warna tulisan menjadi kuning (#ff0).

Langkah 3
Sertakan file utama jQuery (download versi terakhir di http://jquery.com). Dan
tambahkan sedikit animasi dengan perintah berikut ini.

1 $(document).ready(function() {
2 $('ul.menu a')
3 .hover(function() {
4 $(this).stop().animate({ left: 20 }, 'fast');
5 }, function() {
6 $(this).stop().animate({ left: 0 }, 'fast');
7 });
8 });

Dengan perintah jQuery sederhana di atas, kita mengatur efek animasi yang terjadi saat
sebuah link (a) dalam menu dilewati mouse (mouse-over) dan juga apa yang terjadi saat
sebaliknya (mouse keluar dari area link). Kita menggunakan fungsi hover() dengan dua
parameter. Parameter pertama (lihat baris 3-5) akan dijalankan saat mouse-over, dan
parameter kedua (baris 5-7) akan dijalankan saat mouse-out. Saat mouse-over, pertama-
tama jquery akan menghentikan animasi pada link dengan fungsi stop(), selanjutnya
menjalankan animasi dengan fungsi animate() dimana komponen link akan bergeser
selebar 20 pixel dari sebelah kiri, animasi berlangsung secara cepat (fast). Sedangkan
saat mouse-out, kondisi komponen link dikembalikan ke posisi semula secara cepat
(fast) pula.

Halaman | 2
 Efek Animasi Sederhana pada Menu dengan jQuery

Download dan Demo

 Lihat demo program di http://achmatim.net/_demo/jquery/jquery_menu.html.
 Download source code program di http://achmatim.net/download/13
 Download artikel ini di http://achmatim.net/download/14

Referensi
 Jonathan Chaffer, Karl Swedberg, Learning JQuery, Packt Publishing, 2007.
 Achmad Solichin, jQuery untuk Orang Awam, http://achmatim.net, 20 Januari 2009.
 Brandon Aaron, Quick Tip: Prevent Animation Queue Buildup,
http://www.learningjquery.com, 20 Januari 2009.

Tentang Penulis
Achmad Solichin. Adalah Lulusan Teknik Informatika, Fakultas
Teknologi Informasi, Universitas Budi Luhur, Jakarta (S1, 2005). Saat
ini sedang menempuh pendidikan S2 di Magister Teknologi Informasi
Universitas Indonesia (2008). Kegiatan sehari-hari adalah sebagai
Dosen di Universitas Budi Luhur (http://www.bl.ac.id), sekaligus
sebagai Kepala Laboratorium Komputer Universitas Budi Luhur
(http://labkom.bl.ac.id). Kegiatan lain aktif sebagai programmer, web
developer, system analyst dan memberikan pelatihan di berbagai bidang komputer
serta membuat tutorial-tutorial praktis di bidang komputer. Penulis juga terlibat dalam
pengembangan E-Learning di Universitas Budi Luhur. Penulis memiliki situs utama di
http://achmatim.net yang berisi berbagai tutorial praktis. Penulis dapat dihubungi
melalui email di achmatim@gmail.com atau YM achmatim.

Halaman | 3